<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body>


<div class="register_box">
    <div class="title_box">
        <div class="title">CAAE基金申报管理系统</div>
        <div class="reg">注册</div>
    </div>
    <div class="input_box" id="register">

        <div class="item_input">
            <span class="required">*</span>
            <input type="text" v-model="loginInfo.name" placeholder="姓名">
            <div class="close_icon" @click="clear('name')"></div>
        </div>
        
        <div class="item_input" style="color: #999999;font-size: 16px;line-height: 60px;">
            <span class="required">*</span>
            性别：<input type="radio" v-model="loginInfo.sex" value="1" name="boy" checked="checked" style="margin-left: 30px;margin-right: 10px;">女
            <input type="radio" v-model="loginInfo.sex" value="0" name="boy" style="margin-left: 30px;margin-right: 10px;">男
        </div>
        <div class="item_input">
            <span class="required">*</span>
            <input type="text" v-model="loginInfo.company" placeholder="单位名称">
            <div class="close_icon" @click="clear('company')"></div>
        </div>
        <div class="item_input">
            <span class="required">*</span>
            <input type="text" v-model="loginInfo.phone" placeholder="手机号码">
            <div class="close_icon" @click="clear('phone')"></div>
        </div>
        <div class="item_input">
            <span class="required">*</span>
            <input type="text" v-model="loginInfo.membershipNumber" placeholder="中抗会员编号">
            <div class="close_icon" @click="clear('membershipNumber')"></div>
        </div>
        <div class="tipsmember">
            <img src="./img/tip_mem.png" alt="">
            <a href="http://member.caae.org.cn/yudeng/login.html?memtype=11" target="_blank" class="" >如您不是会员，请到CAAE会员管理系统注册。</a>
        </div>
        <div class="item_input">
            <span class="required">*</span>
            <input type="text" v-model="loginInfo.eMail" placeholder="邮箱">
            <div class="close_icon" @click="clear('eMail')"></div>
        </div>
        
        <div class="item_input">
            <input type="text" v-model="loginInfo.authCode" placeholder="验证码" style="width: 320px;">
            <span class="" @click="getCode" style="cursor: pointer; padding: 4px 8px;color: #5ED2FB;border: 1px solid #5ED2FB;border-radius: 18px;">{{msg}}</span>
        </div>

        <div class="loginBtn">
            <a href="./login.html" class="title14" style= 'color:#3386f3; text-decoration : underline; '>已有账号,去登录</a>
        </div>

        <div class="btn" @click="register">注册</div>


    </div>
</div>


<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript" src="./js/axios.min.js"></script>
<script type="text/javascript" src="./js/qs.min.js"></script>
<script type="text/javascript" src="./js/config.js"></script>

<script>

    const recapp = new Vue({
    el: "#register",
    data: {
        count: '',
        timer: null,
        msg: "获取验证码",
        // 参数
        loginInfo: {
            name:"",
            sex:"",
            company:"",
            eMail:"",
            phone:"",
            membershipNumber:"",
            authCode:"",
        }

    },

    methods: {
        // 获取验证码
        getCode() {
            
            console.log("获取验证码");
            if (this.loginInfo.phone.length == 0){
                alert("请先输入手机号");
                return;
            }
            let paras = {
                "phone":this.loginInfo.phone,
            };
            console.log(paras);
            var that = this;
            let dt = Qs.stringify(paras);
            axios.post(BaseUrl + "client/sendAuthCode", dt)
            .then(function (response) {
                console.log(response);
                if (response.data.code == 200) {
                    alert(response.data.massage);
                    const TIME_COUNT = 60;
                    if (!that.timer) {
                        that.count = TIME_COUNT;
                        that.timer = setInterval(() => {
                            if (that.count > 0 && that.count <= TIME_COUNT) {
                                that.count--;
                                that.msg = "已发送 (" + that.count + "S) ";
                            } else {
                                clearInterval(that.timer);
                                that.timer = null;
                                that.msg = "获取验证码";
                            }
                        }, 1000)
                    }
                }else{
                    alert(response.data.massage);
                }
            })
            .catch(function (error) {
                console.log(error);
            })

        },

        register(){
            console.log("注册");
            if (this.loginInfo.name.length == 0){
                alert("请输入姓名");
                return;
            }
            if (this.loginInfo.sex.length == 0){
                alert("请选择性别");
                return;
            }
            if (this.loginInfo.company.length == 0){
                alert("请输入单位名称");
                return;
            }
            if (this.loginInfo.phone.length == 0){
                alert("请输入手机号");
                return;
            }
            if (this.loginInfo.membershipNumber.length == 0){
                alert("请输入会员编号");
                return;
            }
            if (this.loginInfo.eMail.length == 0){
                alert("请输入邮箱");
                return;
            }else{
                var verify = /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
                if (!verify.test(this.loginInfo.eMail)) {
                    alert("邮箱格式错误, 请重新输入");
                    return;
                }
            }
            if (this.loginInfo.authCode.length == 0){
                alert("请输入验证码");
                return;
            }



            let paras = {
                "phone":this.loginInfo.phone,
                "authCode":this.loginInfo.authCode,
                "register":"0",
                "loginInfo":JSON.stringify(this.loginInfo),
            };
            console.log("注册参数" + paras);
            // var that = this;
            let dt = Qs.stringify(paras);
            axios.post(BaseUrl + "client/login", dt)
            .then(function (response) {
                console.log(response);
                if (response.data.code == 200) {
                    info = response.data.data[0];

                    localStorage.setItem("company",info.company);
                    localStorage.setItem("eMail",info.eMail);
                    localStorage.setItem("loginId",info.id);
                    localStorage.setItem("sex",info.sex);
                    localStorage.setItem("phone",info.phone);
                    localStorage.setItem("membershipNumber",info.membershipNumber);
                    localStorage.setItem("name",info.name);
                    
                    window.location.href = "./index.html";
                }else{
                    alert(response.data.massage);
                }
            })
            .catch(function (error) {
                alert("服务器错误");
                console.log(error);
            })
        },

        clear(type){

            if (type == "name") {
                this.loginInfo.name = "";
            }else if (type == "company"){
                this.loginInfo.company = "";
            }else if (type == "eMail"){
                this.loginInfo.eMail = "";
            }else if (type == "phone"){
                this.loginInfo.phone = "";
            }else if (type == "membershipNumber"){
                this.loginInfo.membershipNumber = "";
            }
            
        
        }


    },
    created:function(){
        var that = this;
        
    },
});




</script>





</body>
</html>